<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'
import {
  adminExportScoreService,
  adminGetScoreDistributionService,
  adminGetScoreListService
} from '@/api/admin'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const route = useRoute()
const paperId = ref(route.params.id)

const tableData = ref([
  {
    stuId: '123456',
    username: '张三',
    score: 90
  },
  {
    stuId: '789012',
    username: '李四',
    score: 85
  }
])

const option = ref({
  title: {
    text: '分数分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数据分布',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 60, name: '90分以上' },
        { value: 735, name: '80到90分' },
        { value: 580, name: '70到80分' },
        { value: 484, name: '60到70分' },
        { value: 300, name: '60分以下' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

const getData = async () => {
  // 获取学生成绩列表数据
  let res = await adminGetScoreListService(paperId.value)
  tableData.value = res.data.data
  console.log('学生成绩列表：', res.data.data)

  // 获取分数分布数据
  res = await adminGetScoreDistributionService(paperId.value)
  console.log('分数分布数据：', res.data.data)

  // 定义分数区间标签
  const scoreLabels = ['90分以上', '80到90分', '70到80分', '60到70分', '60分以下']

  // 更新 ECharts 图表数据
  option.value.series[0].data = scoreLabels.map((label, index) => ({
    name: label,
    value: res.data.data[index] // 后端返回的分布数据与标签一一对应
  }))
}

getData()

// 在组件挂载后初始化 ECharts 图表
onMounted(() => {
  const chartDom = document.querySelector('.charts')
  const myChart = echarts.init(chartDom!)

  // 初始设置
  myChart.setOption(option.value)

  // 在数据更新后重新渲染图表
  const updateChart = () => {
    myChart.setOption(option.value)
  }

  getData().then(updateChart)
})

const exportData = async () => {
  // 获取学生成绩数据
  ElMessage.success('成绩导出成功！请查看您的D盘下的score_result文件夹')
  await adminExportScoreService(paperId.value)
}
</script>

<template>
  <div id="main-teaTestStatisticsDetailPage">
    <div class="title-area">
      <h1>分数详情</h1>
      <el-button class="export-btn" type="primary" @click="exportData">成绩导出</el-button>
    </div>
    <div style="display: flex; width: 100%">
      <!-- 学生成绩表格 -->
      <el-scrollbar style="width: 50%" height="600px">
        <el-table class="table" :data="tableData">
          <el-table-column sortable label="学号" prop="stuId"></el-table-column>
          <el-table-column sortable label="姓名" prop="username"></el-table-column>
          <el-table-column sortable label="成绩" prop="score"></el-table-column>
        </el-table>
      </el-scrollbar>
      <!-- ECharts 图表 -->
      <div class="charts"></div>
    </div>
  </div>
</template>

<style scoped>
#main-teaTestStatisticsDetailPage {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.export-btn {
  position: absolute;
  right: 20px;
  top: 20px;
}

.table {
  margin-top: 20px;
  width: 100%;
}

.charts {
  margin-top: 40px;
  width: 60%;
  height: 400px;
  border: 1px solid skyblue;
  border-radius: 10px;
}
</style>
